<template>
    <div style="background: #111214;color:#fff; width: 100%;min-height: 100vh;">
      <native :title="title"></native>
      <div class="identity-home">
        <div style="color: #fff;font-size: 16px;margin-top:25px;">真实姓名</div>
        <div style="position: relative;">
            <input @focus="utils.blursCli" class="inputSty" style="font-size: 18px;" v-model="name" type="text" placeholder="请输入真实姓名">
        </div>
        <div style="color: #fff;font-size: 16px;margin-top:25px;">身份证号</div>
        <div style="position: relative;">
            <input @focus="utils.blursCli" class="inputSty" style="font-size: 18px;" v-model="idNumber" type="text" placeholder="请输入身份证号">
        </div>
        <!-- <div class="font1 font-z1">请拍摄并上传身份证照片</div>
        <div style="display: flex;justify-content: space-between;width: 100%;height: 97px;">
          <div style="width: 45%;position: relative;">
            <div v-if="!imgUrl1" style="position: relative;">
              <img src="../assets/img/certificate_front.svg" alt="">
              <img style="width:50px;position: absolute;top:23px;left: calc(50% - 25px);" src="../assets/img/identity-icon-camera.svg" alt="">
              <div class="font-z1" style="margin-top: 10px;text-align: center;">身份证正面</div>
            </div>
            <div v-else>
              <img style="width: 100%;height: 97px;" :src="imgUrl1" alt="">
            </div>
            <div class="identity-setImg">
              <van-uploader
              :max-size="2 * 1024 * 1024"
              :after-read="onOversize1"
              >
              </van-uploader>
            </div>
          </div>
          <div style="width: 45%;position: relative;">
            <div v-if="!imgUrl2" style="position: relative;">
              <img src="../assets/img/certificate_back.svg" alt="">
              <img style="width:50px;position: absolute;top:23px;left: calc(50% - 25px);" src="../assets/img/identity-icon-camera.svg" alt="">
              <div class="font-z1" style="margin-top: 10px;text-align: center;">身份证反面</div>
            </div>
            <div v-else>
              <img style="width: 100%;height: 97px;" :src="imgUrl2" alt="">
            </div>
            <div class="identity-setImg">
              <van-uploader
              :max-size="2 * 1024 * 1024"
              :after-read="onOversize2"
              >
              </van-uploader>
            </div>
          </div>
        </div> -->
      </div>
      <div class="identity-btn" @click="jumpTake">提交</div>
    </div>

  </template>

  <script>
  import native from './public/native.vue'
  import { Uploader,Toast } from 'vant'
  export default {
    name: 'identityAuthentication',
    data () {
      return {
        title:'身份认证',
        name:'',
        idNumber:'',
        showImg1:false,
        imgUrl1:'',
        imgUrl2:'',
      }
    },  
    components:{
      native,
      [Uploader.name]:Uploader
    },
    computed: {
      
    },
    mounted() {
        
    },
    methods: {
      //上传身份证正面
      onOversize1(file) {
        let params = new FormData();
        params.append('file',file.file);
        let config = { headers: { //添加请求头
              'Content-Type': 'multipart/form-data' } }
        // this.$http.post(this.utils.config+"/netmall/app/person/api/upload",params,config).then((data) => {
        //     if(data.data.success){
        //         var imgUrl = data.data.message;                        
        //         this.$http.post(this.utils.config+"/netmall/app/person/api/updateUserAvater?id="+this.userId+"&avater="+imgUrl).then((data) => {
        //             Toast(data.data.message)
        //             this.initData();
        //         })
        //     }
        // })
      },
      //上传身份证反面
      onOversize2(file) {
        let params = new FormData();
        params.append('file',file.file);
        let config = { headers: { //添加请求头
              'Content-Type': 'multipart/form-data' } }
        // this.$http.post(this.utils.config+"/netmall/app/person/api/upload",params,config).then((data) => {
        //     if(data.data.success){
        //         var imgUrl = data.data.message;                        
        //         this.$http.post(this.utils.config+"/netmall/app/person/api/updateUserAvater?id="+this.userId+"&avater="+imgUrl).then((data) => {
        //             Toast(data.data.message)
        //             this.initData();
        //         })
        //     }
        // })
      },
      jumpTake(){
        if(!this.name){
          Toast('请输入真实姓名！')
        }
        if(!this.idNumber){
          Toast('请输入身份证号！')
        }
        var arr = {
          realName:this.name,
          cardNum:this.idNumber
        }
        this.$http.post(this.utils.config+"/gz/member/card_authenticate",arr).then((data)=>{
                Toast(data.data.msg);
                if(data.data.success){
                  localStorage.setItem('cardState',2);
                    setTimeout(()=>{
                        this.$router.go(-1);
                    },2200)
                }
            })
      }
    },
  }
  </script>

  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style lang="less" scoped>
    .identity-home{
      padding:10px 15px;
      .font1{
        margin-top: 34px;
        margin-bottom: 22px;
      }
    }
    .identity-setImg{
        position: absolute;
        top:0px;
        width:100%;
        height: 97px;
        opacity: 0;
    }
    .identity-setImg /deep/ .van-uploader{
      width:100%;
      height: 97px;
    }
    .identity-setImg /deep/ .van-uploader__upload{
      width:100%;
      height: 97px;
    }
    .identity-btn{
      position: fixed;
      bottom: 0px;
      width: calc(100% - 30px);
      height: 56px;
      line-height: 56px;
      margin-left: 15px;
      margin-bottom: 10px;
      background-color: #6E59FF;
      border-radius: 6px;
      text-align: center;
      font-size: 16px;
    }
  </style>
